<template>
  <div class="content">
    <div class="navleft">
      <el-row class="tac">
      <el-col :span="12">
        <el-menu
          :default-active=listIndex
          class="el-menu-vertical-demo"
          @open="handleOpen"
          @close="handleClose"
          router
          background-color="#545c64"
          text-color="#fff"
          active-text-color="#ffd04b">
          
          <el-menu-item index="0" route="/">
            <i class="el-icon-menu"></i>
            <span slot="title">工作平台</span>
          </el-menu-item>
          <el-submenu index="1">
            <template slot="title">
              <i class="el-icon-location"></i>
              <span>用户管理</span>
            </template>
            <el-menu-item-group>
              <template slot="title">分组一</template>
              <el-menu-item index="1-1" route="/userlist">用户列表</el-menu-item>
              <el-menu-item index="1-2">选项2</el-menu-item>
            </el-menu-item-group>
            <el-menu-item-group title="分组2">
              <el-menu-item index="1-3">选项3</el-menu-item>
            </el-menu-item-group>
            <el-submenu index="1-4">
              <template slot="title">选项4</template>
              <el-menu-item index="1-4-1">选项1</el-menu-item>
            </el-submenu>
          </el-submenu>
          <el-menu-item index="2" route="/goods">
            <i class="el-icon-menu"></i>
            <span slot="title">商品管理</span>
          </el-menu-item>
          <el-menu-item index="3">
            <i class="el-icon-document"></i>
            <span slot="title">订单管理</span>
          </el-menu-item>
          <el-menu-item index="4">
            <i class="el-icon-setting"></i>
            <span slot="title">投诉管理</span>
          </el-menu-item>
        </el-menu>
      </el-col>
      </el-row>
    </div>
    <div class="navRight">
      <bread-crumb></bread-crumb>
      <router-view>
        <div class="navright">
          <!-- <name-content></name-content> -->
        </div>
      </router-view>
    </div>
    
  </div>
</template>

<script>
import BreadCrumb from '@/components/Bread.vue'
  export default {
    name:"NavLeft",
    data() {
      return {
        workList:[''],
        listIndex:''
      }
    },
    components:{
      BreadCrumb
    },
    methods: {
      handleOpen(key, keyPath) {
        console.log(key, keyPath);
        this.listIndex=key
      },
      handleClose(key, keyPath) {
        //this.listIndex=key
        console.log('oo'+key, keyPath);
      }
    }
  }
</script>

<style lang="scss" scoped>
.content{
  display: flex;
  height: 91vh;
  //overflow: hidden;
  //margin-bottom: 60px;
  //padding-bottom: 60px;
  //justify-content: space-between;
}
  .navleft{
    //display: flex;
    background-color: $bgColor;
    height: 100%;
  }
    .tac{
      width: 150px;
    }
      .el-menu-item{
        min-width:150px;
      }
      .el-menu-vertical-demo{
        border-right: none;
      }
      .el-col-12{
        width: 100% !important;
      }
  .navRight{
    //flex: 1;
    //background-color: red;
    width: 85%;
  }

</style>